<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
		<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'">-->
        <title>Title</title>
    </head>
    <body>
        <div>
            <input id="play" type="button" value="开始播放"/>
            <input id="pause" type="button" value="暂停播放"/>
            <input id="continue" type="button" value="继续播放"/>
            <input id="stop" type="button" value="停止播放"/>
            <input id="capture" type="button" value="抓图"/>
			<input id="capture2" type="button" value="抓图"/>
            <br/>
            <canvas id="testCanvas" style="background-color:#000;width:600px;height:300px;"></canvas>
            <div>
                <video id="testVideo" style="background-color:#000;width:600px;height:300px;"></video>
            </div>
        </div>
    </body>
    <script src="module/playerControl.js"></script>
    <script>
        var player = null;
        var canvas = document.getElementById('testCanvas');
        var video = document.getElementById('testVideo');
        document.getElementById('stop').onclick = function(){
            player && player.close();
        }
        document.getElementById('pause').onclick = function(){
            player && player.pause();
        }
        document.getElementById('continue').onclick = function(){
            player && player.play();
        }
        
        document.getElementById('capture').onclick = function(){
            player && player.capture();
        }
		document.getElementById('capture2').onclick = function(){
            player && player.capture2();
        }
        document.getElementById('play').onclick = function(){
            var options = {
                wsURL: 'ws://192.168.1.108/rtspoverwebsocket',
                rtspURL: 'rtsp://192.168.1.108/cam/realmonitor?channel=1&subtype=0&proto=Private3',
                username: 'admin',
                password: 'admin123'
            };
            player = new PlayerControl(options);
            player.on('WorkerReady', function(){
                player.connect();  
            });
            player.on('DecodeStart', function(rs){
                console.log('开始解码');
                console.log(rs);

            });
            player.on('PlayStart', function(rs){
                console.log('开始播放');
                console.log(rs);
            });
            player.on('Error', function(rs){
                console.log('发生错误');
                console.log(rs);
            });
            player.on('FileOver', function(rs){
                console.log('回放播放完成');
                console.log(rs);
            });
            player.on('MSEResolutionChanged', function(rs){
                console.log('分辨率改变');
                console.log(rs);
            });
            player.on('FrameTypeChange', function(rs){
                console.log('编码模式改变');
                console.log(rs);
            });
            player.on('audioChange', function(rs){
                console.log('音频编码改变');
                console.log(rs);
            });
            player.init(canvas, video);
        }

    </script>
</html>